<template>
    <div id="HomePage">
        <!-- 轮播图 -->
        <swiper
            id="swiper"
            :modules="modules"
            :slidesPerView="1"
            :spaceBetween="0"
            navigation
            lazy
            loop
            autoplay
            :pagination="{
                clickable: true,
            }"
        >
            <swiper-slide
                v-for="(item, index) in swiperList"
                :key="index"
                class="banner-swiper"
            >
                <img class="swiper-lazy" :data-src="baseUrl + item.imgUrl" alt="轮播图" />
                <div class="swiper-lazy-preloader"></div>
<!--                <div class="swiper-slide-title">-->
<!--                    <h1>{{ item.name }}</h1>-->
<!--                    <p>{{ item.name }}</p>-->
<!--                </div>-->
            </swiper-slide>
        </swiper>
      <!--专注服务-->
      <div class='container-fuild'>

        <div class='one-box'>
          <div class='b1'>
            <span>{{ numObj.year }}</span> <text>七年持续专注数字化服务</text>
          </div>
          <div class='b1'>
            <span>{{ numObj.hours }}</span> <text>7*24专注实施和服务团队，全程无忧</text>
          </div>
          <div class='b1'>
            <span>{{ numObj.num }}</span> <text>服务全国20多个省市超1000家用户</text>
          </div>
        </div>
      </div>
      <!--产品推荐-->
      <div class='container-fuild'>
        <div class='two-box'>
          <div class='title_box'>产品推荐 <span>Product Recommendations</span></div>
          <div class='b2' v-for='(item, index) in productArr' :key='index'>
            <div class='b2-left'>
              <text>{{ item.title }}</text>
            </div>
            <div class='b2-center'>
              <img :src='baseUrl + item.imgUrl' width='200' height='40'>
            </div>
            <div class='b2-right'>
              <text v-for='(e, i) in item.arr' :key='i'><span style='color: #F56C6C; margin-right: 3px'>●</span>{{ e }}</text>
            </div>

            </div>

          </div>

        </div>

        <!-- 大数据管理系统 -->
<!--        <div id="bigData" class="container-fuild">-->
<!--            <div class="bigData-container row">-->
<!--                <div class="col-md-6 col-sm-12 col-xs-12 wow zoomIn">-->
<!--                    <img-->
<!--                        class="img-responsive"-->
<!--                        src="@/assets/img/service1.png"-->
<!--                        alt="散热半导体芯片"-->
<!--                    />-->
<!--                </div>-->
<!--                <div class="col-md-6 col-sm-12 col-xs-12">-->
<!--                    <h2 class="bigData-title">-->
<!--                        散热半导体芯片-->
<!--                        <small>/ Heat Dissipation Semiconductor Chip</small>-->
<!--                    </h2>-->
<!--                    <p>-->
<!--                        热电材料可以直接将热能转化为电能或直接将电能转换热能，能量转换是通过内部载流子运动-->
<!--                        实现的，因而其组成的热电器件无噪音和污染物产生，还具有体积小易于集成，无移动部件，可-->
<!--                        靠性高等优点。这些特性使热电技术在废热回收和热电制冷等应用中具有独特的优势。-->
<!--                    </p>-->
<!--                    <p>-->
<!--                        半导体制冷芯片是由许多微小而有效的热泵组成的半导体器件。通过施加一个低压直流电源，-->
<!--                        热量将从半导体制冷芯片的一面转移到另一面，从而产生一面变热另一面变冷的现象。超微半-->
<!--                        导体制冷芯片使用高性能碲化铋材料与先进封装技术，尺寸可小于2mm*2mm*1mm，温度精-->
<!--                        准度可控制在±0.01℃，制冷功率密度达35W/cm²，满足航空航天领域的性能和可靠性要求。-->
<!--                    </p>-->
<!--                    &lt;!&ndash; <h2 class="bigData-device">PC/PAD/Phone &nbsp; 全设备支持</h2> &ndash;&gt;-->
<!--                    &lt;!&ndash; <a href="javascript:;" class="btn btn-block btn-info btn-lg">联系我们</a> &ndash;&gt;-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

        <!-- 客户评价 -->
            <div class="container-fuild">
              <div class='three_box'>
                <div class='title_box'>
                  部分客户
                  <span>Application Cases</span></div>
                <div class='b3' v-for='(item, index) in caseList' :key='index'>
                  <img :src='item.img'>
                </div>
              </div>
              <div class='three_box'>
                <div class='title_box'>
                  生态伙伴
                  <span>Ecological Partner</span></div>
                <div class='b3 b3-1' v-for='(item, index) in partnerList' :key='index'>
                  <img :src='item.img'>
                </div>
              </div>


            </div>
        <!-- 为什么选择我们 -->
        <div id="whyChooseUs" class="conatiner-fuild">
            <div class="container">
              <div class='title_box tt1'>
                我们的优势
                <span>Our Advantage</span></div>
<!--                <div class="text-center whyChooseUs-title">-->
<!--                    <p>为什么选择我们的服务</p>-->
<!--                    <p>THE REASON TO CHOOSING US</p>-->
<!--                </div>-->

                <div class="row">
                    <div
                        v-for="(item, index) in serverList"
                        :key="index"
                        class="col-md-3 col-sm-6 col-xs-12 server-wrapper"
                    >
                        <div
                            class="server-block slideInUp wow"
                            onmouseenter="this.style.color='#28f';this.style.borderColor='#28f'"
                            onmouseleave="this.style.color='#666';this.style.borderColor='#ccc'"
                        >
                            <img class="center-block" :src="item.logo" alt="logo" />
                            <p class="text-center">{{ item.title }}</p>
                            <div
                                class="text-center"
                                onmouseenter="this.style.color='#28f'"
                                onmouseleave="this.style.color='#ccc'"
                                v-html="item.content"
                            ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      <!-- 您身边的IT专家 -->
      <div id="contactUs" class="container-fuild text-center">
        <div class="contactUs-container container slideInUp wow">
          <h1>您身边的xxx专家</h1>
          <h3>7x24小时提供出色的服务</h3>
          <button
            class="btn btn-default btn-sm"
            onmouseleave="this.style.borderColor='#ffffff'; this.style.backgroundColor='#ffffff'; this.style.color='#3f3f3f';"
            onmouseenter="this.style.backgroundColor='transparent'; this.style.borderColor='#ffffff'; this.style.color='#ffffff';"
          >
            联系我们
          </button>
          <!--                <div class="contactUs-contactWay">-->
          <!--                    <span></span>-->
          <!--                    <span></span>-->
          <!--                    <span></span>-->
          <!--                </div>-->
        </div>
      </div>
    </div>
</template>

<script setup name="HomePage">
import { bannerList, productList } from '@/api/api.js'
import WOW from 'wow.js';
    import { getCurrentInstance, onMounted, ref } from 'vue';
    // import Swiper from 'swiper'
    import { A11y, Autoplay, Lazy, Navigation, Pagination, Scrollbar } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';
    import 'swiper/css/scrollbar';
    import 'swiper/css/lazy';
    import 'swiper/css/autoplay';

    import banner1 from '@/assets/img/banner1.png';
    import banner2 from '@/assets/img/banner2.png';
    import banner3 from '@/assets/img/banner3.png';
    import banner4 from '@/assets/img/banner4.png';

    import logo_hp from '@/assets/img/logo_hp.png';
    import logo_kk from '@/assets/img/logo_kk.png';
    import logo_toyota from '@/assets/img/logo_toyota.png';

    import img_tel from '/images/service1-49.png';
    import img_computer from '@/assets/img/computer.png';
    import img_qq from '/images/service1-50.png';
    import img_skill from '@/assets/img/skill.png';
    const baseUrl = import.meta.env.VITE_APP_BASE_API;

    const swiperList =  ref([])

    const modules = [Navigation, Pagination, Scrollbar, A11y, Lazy, Autoplay];


    const serverList = [
        {
            logo: img_tel,
            title: '客户至上',
            content: '<p>始终贯穿“以人为本、客户至上”的经营理念',
        },
        {
            logo: img_computer,
            title: '塑造服务',
            content: '<p>遵循“需求塑造服务、平台创造价值”的运作思路',
        },
        {
            logo: img_qq,
            title: '共同成长',
            content: '<p>以“与客户共同走向成功”作为宗旨,与单位结成战略合作伙伴,共同成长!',
        },
        {
            logo: img_skill,
            title: '优秀团队',
            content: '<p>数十位优秀的企业信息化顾问、工程师,均通过相关产品的专业认证</p>',
        },
    ];
    const numObj= {
      year: '7+',
      num: '1000+',
      hours: '7*24'
    }
    const productArr = ref([])
    const caseList = [
      {img: "src/assets/img/customer/linuo.png"},
      {img: "src/assets/img/customer/tongya.png"},
      {img: "src/assets/img/customer/lipai.png"},
      {img: "src/assets/img/customer/shantui.png"},
      {img: "src/assets/img/customer/haituo.png"},
      {img: "src/assets/img/customer/kangjieli.png"},
      {img: "src/assets/img/customer/denaici.png"},
      {img: "src/assets/img/customer/znl.png"},
      {img: "src/assets/img/customer/milex.png"},
      {img: "src/assets/img/customer/cd.png"},
      {img: "src/assets/img/customer/lm.png"},
      {img: "src/assets/img/customer/lunan.png"},

    ]
const  partnerList = [
  {img: "src/assets/img/partner/huawei.png"},
  {img: "src/assets/img/partner/langcao.png"},
  {img: "src/assets/img/partner/yongyou.png"},
  {img: "src/assets/img/partner/lenovo.png"},
  {img: "src/assets/img/partner/yidong.png"},
  {img: "src/assets/img/partner/heihu.png"},
  {img: "src/assets/img/partner/gooci.png"},
  {img: "src/assets/img/partner/fanwei.png"},
  {img: "src/assets/img/partner/qiqitong.png"},
  {img: "src/assets/img/partner/zhengyuan.png"},
]

    // const { proxy } = getCurrentInstance() //获取上下文实例，ctx=vue2的this
    onMounted(() => {
        // console.log('mounted', proxy)
        // console.log(proxy.$wow, '------')
        /* wowjs动画 */
        new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true,
        }).init();
      // getLogin()
      getBannerList()
      getProductList()
    });
function getBannerList() {
  bannerList().then(res => {
    const data = res.data
    swiperList.value = data.rows
  })
}
function getProductList() {
  productList().then(res => {
    const data = res.data
    data.rows.forEach(item => {
      item.arr = item.productName.split(',')
    })
    productArr.value = data.rows
  })
}



</script>
<style lang='scss' scoped>
.one-box {
  width: 75%;
  margin: 0 auto;
  height: 250px;
  display: flex;
  flex-direction: row;
  .b1 {
    // border: 1px solid #000; /* 边框，仅为了可视化 */
    flex: 1; /* 每个box平均分配父容器的宽度 */
    text-align: center; /* 文字水平居中 */
    box-sizing: border-box; /* 防止边框导致盒子大小改变 */
    padding: 60px 0;
    span{
      display: block;
      width: 100%;
      color: #ff0302;
      font-size: 55px;
      font-weight: 700;
    }
    text {
      display: block;
      font-size: 15px;
      color: #606266;
      margin-top: 15px;
    }
}
}
.title_box {
  width: 100%;
  height: 150px;
  margin: 0 auto;
  text-align: center;
  font-weight: 600;
  font-size: 28px;
  line-height: 150px;
  color: #004a96;
  position: relative;
  span {
    display: block;
    width: 100%;
    position: relative;
    font-size: 16px;
    bottom: 110px;
    color: #CDD0D6;
  }
}
.title_box::before,
.title_box::after {
  content: '';
  position: absolute;
  top: 75px;
  height: 1px;
  background: #CDD0D6;
}

.title_box::before {
  left: 35%;
  width: 10%;
}

.title_box::after {
  right: 35%;
  width: 10%;
}
.tt1::before {
  left: 30%;
  width: 10%;
}
.tt1::after {
  right: 30%;
  width: 10%;
}
.two-box {
  width: 100%;
  margin: 0 auto;
  height: 800px;
  background: #f9f9f9;
  padding: 0 50px;
  .b2 {
    width: 70%;
    height: 140px;
    margin: 0 auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    &:hover {
      .b2-left {
        background-color: #ff0302;
      }
    }
    .b2-left {
      width: 13%;
      height: 100%;
      background-color: #9a9a9a;
      text {
        font-size: 19px;
        font-weight: 700;
        color: #fff;
        display: block;
        text-align: center;
        width: 50%;
        margin: 40px auto;

      }
    }
    .b2-center {
      width: 22%;
      height: 100%;
      border-right: 1px solid #DCDFE6;
      background: #ffffff;
      padding: 50px 20px;


    }
    .b2-right {
      width: 65%;
      height: 100%;
      background: #fff;
      padding: 60px 20px;
      box-shadow: 1px 1px 1px 0 rgb(232.8, 233.4, 234.6);
      text {
        font-size: 14px;
        font-weight: 700;
        color: #606266;
        margin: 0 8px;
      }
    }

  }
  //.b2:nth-child(3) {
  //  .b2-center {
  //    padding: 25px 50px 0;
  //  }
  //  img {
  //    width: 180px;
  //    height: 90px;
  //  }
  //}
}
.three_box {
  width: 75%;
  margin: 0 auto;
  padding: 0 80px;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .b3 {
    width: 22%;
    height: 120px;
    border: 1px solid #EBEEF5;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 0 rgb(243.9, 244.2, 244.8);
    margin-right: 10px;
    padding:  35px 30px;
    &:hover {
      box-shadow: 2px 2px 3px 0 rgb(177.3, 179.4, 183.6);
    }

  }
  .b3:nth-child(4) {
    padding: 8px 0 0 60px;
  }
  .b3:nth-child(5) {
    padding: 30px 0 0 60px;
  }
  .b3:nth-child(8) {
    padding: 20px 0 0 60px;
  }
  .b3:nth-child(10) {
    padding: 15px 0 0 80px;
  }
  .b3:nth-child(11) {
    padding: 25px 0 0 40px;
  }
  .b3-1 {
    width: 18%;
    height: 100px;
    padding: 25px 20px;
  }
  .b3-1:nth-child(4) {
    padding: 8px 0 0 60px;
  }
  .b3-1:nth-child(5) {
    padding: 25px 20px;
  }
  .b3-1:nth-child(6) {
    padding: 5px 0 0 70px;
  }
  .b3-1:nth-child(7) {
    padding: 0 0 0 65px;
    img {
      width: 100px;
      height: 95px;
    }
  }
  .b3-1:nth-child(8) {
    padding: 5px 0 0 50px;
  }
  .b3-1:nth-child(9) {
    padding: 20px 0 0 40px;
  }
  .b3-1:nth-child(10) {
    padding: 25px 0 0 40px;
  }

}
</style>
<style scoped>
/* 整体盒子 */
#HomePage {
  width: 100%;
}

/* 顶部轮播图 */
#swiper {
  width: 100%;
  height: 600px;
}

#swiper .banner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
}

#swiper .banner-swiper img {
  width: 100%;
  height: 100%;
}

#swiper .banner-swiper .swiper-slide-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(51, 51, 51, 0.534);
  text-align: center;
  line-height: 80px;
}

#swiper .banner-swiper .swiper-slide-title > h1 {
  font-size: 50px;
  margin-top: 12%;
}

#swiper .banner-swiper .swiper-slide-title > p {
  font-size: 20px;
  margin-top: 1%;
  font-weight: 700;
}

/* 大数据管理系统 */
#bigData {
  padding: 100px;
  transition: all ease 0.6s;
  box-sizing: border-box;
}

#bigData .bigData-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

#bigData p {
  font-size: 14px;
  color: #333;
  line-height: 2rem;
}

#bigData .bigData-device {
  margin: 50px 0 20px;
}

/* 您身边的IT专家 */
#contactUs {
  color: #fff;
  height: 300px;
  background: url('../assets/img/contact/img.png') 0 0 no-repeat;
  background-size: 100% 100%;
  transition: all ease 0.6s;
}

#contactUs .contactUs-container {
  padding-top: 30px;
}

#contactUs .contactUs-container button {
  width: 300px;
  height: 50px;
  margin-top: 40px;
}

#contactUs .contactUs-container .contactUs-contactWay span {
  display: inline-block;
  width: 48px;
  height: 48px;
  margin: 30px;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(1) {
  background: url('../assets/img/weixin.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(2) {
  background: url('../assets/img/weibo.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

#contactUs .contactUs-container .contactUs-contactWay span:nth-of-type(3) {
  background: url('../assets/img/twitter.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

/* 客户评价 */
#customer {
  padding: 50px 0;
  box-sizing: border-box;
  background: #efefef;
  transition: all ease 0.6s;
}

#customer .customer-title {
  font-size: 30px;
  color: rgb(102, 102, 102);
  margin: 0 0 30px;
}

#customer .customer-block {
  background: #fff;
  padding: 30px 80px;
}

#customer .customer-logo img {
  width: 94px;
  height: 94px;
  border: 1px solid #ccc;
}

#customer .customer-yh img {
  width: 34px;
  height: 34px;
}

#customer .customer-content1 {
  padding-bottom: 20px;
  border-bottom: 1px solid #0ce9f1;
}

#customer .customer-content2 {
  padding-top: 20px;
}

/* 为什么选择我们 */
#whyChooseUs {
  padding: 0 80px 50px 80px;
}

#whyChooseUs .whyChooseUs-title {
  margin-bottom: 50px;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
  font-size: 25px;
  font-weight: 500;
}

#whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
  font-size: 14px;
}

#whyChooseUs .server-block {
  padding: 50px 20px;
  border: 1px solid #ccc;
  border-bottom: 5px solid #ccc;
}

#whyChooseUs .server-block img {
  width: 48px;
  height: 48px;
}

#whyChooseUs .server-block > p {
  font-size: 20px;
  margin: 30px 0;
}

#whyChooseUs .server-block > div {
  color: #ccc;
}

/* 媒体查询（手机） */
@media screen and (max-width: 768px) {
  #swiper {
    height: 200px;
  }

  #bigData {
    padding: 30px;
  }

  #bigData .bigData-title {
    font-size: 20px;
  }

  #bigData .bigData-device {
    font-size: 20px;
    margin: 10px 0 10px;
  }

  #contactUs {
    height: 200px;
    transition: all ease 0.6s;
  }

  #contactUs .contactUs-container {
    padding-top: 0;
  }

  #contactUs .contactUs-container h1 {
    font-size: 25px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 18px;
  }

  #contactUs .contactUs-container button {
    width: 200px;
    height: 30px;
    margin-top: 20px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 10px;
  }

  #customer {
    padding: 30px 0;
    box-sizing: border-box;
    background: #fff;
  }

  #customer .customer-title {
    font-size: 16px;
    font-weight: bold;
  }

  #customer .customer-logo img {
    width: 48px;
    height: 48px;
  }

  #customer .customer-block {
    padding: 30px;
  }

  #customer .customer-block > div {
    padding: 30px 0;
  }

  #whyChooseUs {
    padding: 20px 0;
    transition: all ease 0.6s;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(1) {
    font-size: 20px;
    font-weight: 700;
  }

  #whyChooseUs .whyChooseUs-title p:nth-of-type(2) {
    font-size: 12px;
  }

  #whyChooseUs .server-block {
    padding: 50px 0;
    border: 1px solid #ccc;
    border-bottom: 5px solid #ccc;
  }

  #whyChooseUs .server-block img {
    width: 48px;
    height: 48px;
  }

  #whyChooseUs .server-block > p {
    font-size: 20px;
    margin: 30px 0;
  }

  #whyChooseUs .server-block > div {
    color: #ccc;
  }
}

/* 媒体查询（平板） */
@media screen and (min-width: 768px) and (max-width: 996px) {
  #swiper {
    height: 400px;
  }

  #bigData {
    padding: 60px;
  }

  #bigData .bigData-title {
    font-size: 30px;
  }

  #bigData .bigData-device {
    font-size: 30px;
    margin: 30px 0 15px;
  }

  #contactUs {
    height: 300px;
  }

  #contactUs .contactUs-container {
    padding-top: 50px;
  }

  #contactUs .contactUs-container h1 {
    font-size: 30px;
  }

  #contactUs .contactUs-container h3 {
    font-size: 20px;
  }

  #contactUs .contactUs-container button {
    width: 300px;
    height: 50px;
    margin-top: 30px;
  }

  #contactUs .contactUs-container .contactUs-contactWay span {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin: 15px;
  }

  #customer .customer-title {
    font-size: 24px;
  }

  #whyChooseUs {
    padding: 20px 0;
  }
}
</style>
